<template>
  <h2>农场订单发货</h2>
  <br>
  <el-table :data="shipmentTable" style="width: 100%">
    <el-table-column type="expand" label="地址" width="60px">
      <template #default="props">
        <div style="padding: 0 80px; box-sizing: border-box">
          <p>收货地区: {{ CodeToText[props.row.address.province] }} / {{ CodeToText[props.row.address.city] }} / {{ CodeToText[props.row.address.area] }}</p>
          <p>详细地址: {{ props.row.address.addressDetail }}</p>
          <p>联系方式: {{ props.row.address.phoneNum }}</p>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="农产品名" prop="produceName" width="200px" />
    <el-table-column label="农产品图片" width="100px" >
      <template #default="scope">
        <div style="display: flex; align-items: center" >
          <el-image :src="this.staticResourcesUrl+scope.row.img" fit="cover" style="max-height: 50px">
            <template #error>
              <div class="image-slot">
                <el-icon><picture /></el-icon>
              </div>
            </template>
          </el-image>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="农产品份数" prop="produceCounts" width="120px" />
    <el-table-column label="农产品单价" prop="producePrice" width="120px" />
    <el-table-column label="农产品总价" prop="produceTotalPrice" width="160px" />
    <el-table-column label="订单日期" prop="time" width="200px" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top">
          <template #default>
            <div>订单发货</div>
          </template>
          <template #reference>
            <el-button @click="shipment(scope.row.bookID, scope.row.produceID)" size="small" type="primary" circle >发</el-button>
          </template>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import request from "@/http/request";
import {getCurrentInstance} from "vue";
const {CodeToText} = require("element-china-area-data/dist/app");

export default {
  name: "ShipmentProduce",
  data() {
    return {
      shipmentTable: [],
    }
  },
  methods: {
    getMerchantBook() {
      request({
        url: "/book/getMerchantBook",
        method: "get",
      }).then((response) => {
        if (response.code === 200) {
          this.shipmentTable = response.data;
        } else {
          this.$tipUtil.errTip(response.msg);
        }
      })
    },
    shipment(bookID, produceID) {
      request({
        url: "/book/shipment",
        method: "post",
        data: {
          bookID: bookID,
          produceID: produceID,
        }
      }).then((response) => {
        if (response.code === 200) {
          this.$tipUtil.successTip(response.msg);
          this.getMerchantBook();
        } else {
          this.$tipUtil.errTip(response.msg);
        }
      })
    },
  },
  setup() {
    const { appContext : { config: { globalProperties } } } = getCurrentInstance();
    const staticResourcesUrl = globalProperties.$staticResourcesUrl;
    return {
      CodeToText,
      staticResourcesUrl,
    }
  },
  mounted() {
    this.getMerchantBook();
  }
}
</script>

<style scoped>

</style>